<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息编码与解码模拟器</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .container {
    display: flex;
    max-width: 1200px;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .module {
    flex: 1;
    padding: 20px;
    border-right: 1px solid #eee;
  }
  .module:last-child {
    border-right: none;
  }
  h2 {
    color: #333;
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
  .input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  label {
    width: 95%;
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 18px;
    text-align: center;
  }
  input[type="text"], input[type="number"], textarea, button {
    width: 95%; /* Full width inputs */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  button {
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border: none;
    margin-top: 10px;
  }
  button:hover {
    background-color: #4cae4c;
  }
  .result-container {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
  }
  .result {
    padding: 10px;
    background-color: #e8f5e9;
    border: 1px solid #c8e4c9;
    border-radius: 4px;
    font-size: 16px;
    word-wrap: break-word;
    overflow-y: auto; /* Add scroll bar if content overflows */
    max-height: 200px; /* Maximum height of the result box */
    min-height: 50px;
    height: 100px;
    width: 100%;
  }
  .copy-button {
    padding: 5px 10px;
    font-size: 14px;
    margin-top: 10px;
    width: 30%;
  }
  .checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: center;
  }
  .checkbox-group input[type="checkbox"] {
    margin-right: 10px; /* Add margin to checkbox */
  }
  .checkbox-group label {
    margin-top: 4px;
  }
  .提示 {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
    display: block;
  }
</style>
</head>
<body>
<div class="container">
  <div class="module">
    <h2>消息发送者模块</h2>
    
    <div class="checkbox-group">
      <label for="protocalSelect">请选择编码协议：</label>
      <input type="checkbox" id="encodeToDecimal" checked>
      <label for="encodeToDecimal">字符转十进制数</label>
      <input type="checkbox" id="encodeToBinary">
      <label for="encodeToBinary">十进制数转二进制数</label>
    </div>
    
    <div class="input-group">
      <textarea id="messageInput" placeholder="在这里输入消息进行编码..." rows="4"></textarea>
    </div>
    
    <button onclick="convertMessage()">编码消息</button>
    <div class="result-container">
      <div class="result" id="encodedMessage"></div>
      <button class="copy-button" onclick="copyToClipboard('encodedMessage')">一键复制</button>
      <span id="copyMessage" class="提示"></span>
    </div>
  </div>
  
  <div class="module">
    <h2>消息接收者模块</h2>
    
    <div class="checkbox-group">
      <label for="protocalSelect">请选择解码协议：</label>
      <input type="checkbox" id="decodeToBinary" checked>
      <label for="decodeToBinary">二进制数转十进制数</label>
      <input type="checkbox" id="decodeToChar">
      <label for="decodeToChar">十进制数转字符</label>
    </div>
    
    <div class="input-group">
      <textarea id="decodedInput" placeholder="在这里输入内容进行解码..." rows="4"></textarea>
    </div>
    
    <button onclick="decodeMessage()">解码消息</button>
    <div class="result-container">
      <div class="result" id="decodedMessage"></div>
    </div>
  </div>
</div>

<script>
function convertMessage() {
  const message = document.getElementById('messageInput').value;
  let encodedMessageParts = [];
  
  // Encode characters to decimal numbers
  if (document.getElementById('encodeToDecimal').checked) {
    encodedMessageParts = message.split('').map(char => char.charCodeAt(0).toString());
  }
  
  // Encode decimal numbers to binary strings
  if (document.getElementById('encodeToBinary').checked) {
    encodedMessageParts = encodedMessageParts.map(num => parseInt(num).toString(2));
  }
  
  const encodedMessage = encodedMessageParts.join(' ');
  document.getElementById('encodedMessage').textContent = encodedMessage;
}

// function decodeMessage() {
//   const encodedInput = document.getElementById('decodedInput').value;
//   let decodedParts = encodedInput.trim().split(' ');
  
//   // Decode binary strings to decimal numbers if needed
//   if (document.getElementById('decodeToBinary').checked) {
//     decodedParts = decodedParts.map(binaryStr => parseInt(binaryStr, 2).toString());
//   }
  
//   // Decode decimal numbers to characters
//   if (document.getElementById('decodeToChar').checked) {
//     decodedParts = decodedParts.map(num => String.fromCharCode(parseInt(num)));
//   }
  
//   const decodedMessage = decodedParts.join('');
//   document.getElementById('decodedMessage').textContent = decodedMessage;
// }

function decodeMessage() {
  let decodedMessage = '';
  const encodedInput = document.getElementById('decodedInput').value.trim().split(' ');
  let isValid = true;

  // Decode binary strings to decimal numbers if needed
  if (document.getElementById('decodeToBinary').checked) {
    encodedInput.forEach(binaryStr => {
      const decimal = parseInt(binaryStr, 2);
      if (!isNaN(decimal)) {
        decodedMessage += decimal + ' ';
      } else {
        decodedMessage = '解码失败：错误的二进制数 ';
        isValid = false;
      }
    });
  } else {
    encodedInput.forEach(str => {
      const num = parseInt(str);
      if (!isNaN(num)) {
        decodedMessage += num + ' ';
      } else {
        decodedMessage = '解码失败：无效的十进制数 ';
        isValid = false;
      }
    });
  }

  if (!isValid) {
    document.getElementById('decodedMessage').textContent = decodedMessage;
    return;
  }

  // Decode decimal numbers to characters
  if (document.getElementById('decodeToChar').checked && isValid) {
    decodedMessage = decodedMessage.trim().split(' ').map(num => {
      const char = String.fromCharCode(parseInt(num));
      return isNaN(num) ? '解码失败：无效的十进制数' : char;
    }).join('');
  }

  document.getElementById('decodedMessage').textContent = decodedMessage;
}

function copyToClipboard(elementId) {
  const element = document.getElementById(elementId);
  const text = element.textContent;
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
  const copyMessage = document.getElementById('copyMessage');
  copyMessage.textContent = '编码消息复制成功啦，快去发送吧';
  setTimeout(() => {
    copyMessage.textContent = '';
  }, 2000);
}
</script>
</body>
</html>